<template>
  <div class="video-device-setalarm">
    <h2 style="display:inline-block;">报警设置:</h2>
    <Form :model="formData" :label-width="120" :rules="formRules" ref="collectparamsRef">
      <Col :span="12">
      <FormItem label="告警温度:" prop="errorTemp">
        <Input v-model="formData.errorTemp" type="number">
        <span slot="append">单位(℃)</span>
        </Input>
      </FormItem>
      <FormItem>
        <Button type="info" @click="handelSubmit" :loading="btnSaveDisable">
          <span v-if="!btnSaveDisable">保存</span>
          <span v-else>保存中</span>
        </Button>
      </FormItem>
      </Col>
    </Form>
  </div>
</template>
<script>
  import {
    postVideoAlarm,
    getVideoParams
  } from '@/api';
  import {
    validateDeviceId1
  } from '@/utils/rules';
  export default {
    props: ['id'],
    mounted() {
      this.getInitialState();
    },
    data() {
      return {
        formData: {
          errorTemp: ""
        },
        btnSaveDisable: false,
        formRules: {
          errorTemp: {
            required: true,
            validator: validateDeviceId1("告警温度", "告警温度只能输入正整数"),
            trigger: "blur"
          }
        }
      }
    },
    methods: {
      getInitialState() {
        const self = this;
        let id = self.id,
          params = {
            id
          };
        getVideoParams(params).then(res => {
          if (res.code == 200) {
            const {
              errorTemp
            } = res.data.info;
            this.formData.errorTemp = errorTemp;
          }
        })
      },

      // 提交
      handelSubmit() {
        const vm = this;
        vm.$refs.collectparamsRef.validate(valid => {
          if (valid) {
            vm.btnSaveDisable = true;
            let params = {
              thermalImagerId: vm.id,
              ...vm.formData
            }
            postVideoAlarm(params).then(res => {
              if (res.code == 200) {
                vm.$Message.success('修改成功');
                setTimeout(_ => {
                  vm.btnSaveDisable = false;
                  vm.getInitialState();
                }, 1500)
              }
            })
          }
        })
      }
    }
  }

</script>
